<template>
    <div class="daily">
        <!-- <div>
            <el-tag @click="openPicker" type="info">选择时间:</el-tag>
            <span>{{dayTime}}</span>
        </div>-->
        <el-tag type="info">{{today}} 日报表</el-tag>
        <div class="list">
            <el-table
                class="tables"
                border
                size="mini"
                show-summary
                :header-cell-style="{background:'#ccc'}"
                :data="list"
                stripe
                style="width: 100%"
                :summary-method="getSummaries"
            >
                <el-table-column prop="issue" label="彩种" min-width="60">
                    <template slot-scope="scope">
                        <span
                            v-show="scope.row.module==v.code?true:false"
                            v-for="(v,i) in modules"
                            :key="i"
                        >{{v.value}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="issue" label="期数" min-width="90"></el-table-column>
                <el-table-column prop="quantity" label="笔数" min-width="40"></el-table-column>
                <el-table-column prop="totalBets" label="总投" min-width="40"></el-table-column>
                <el-table-column prop="profit" label="盈亏" min-width="40"></el-table-column>
            </el-table>
        </div>
        <el-pagination
            :pager-count="5"
            @current-change="fy"
            size="mini"
            :page-size="10"
            background
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
        <!-- <mt-datetime-picker
            v-model="dayTime"
            type="date"
            ref="picker"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
        ></mt-datetime-picker>-->
    </div>
</template>

<script>
import moment from "moment";
import { mapState } from "Vuex";
export default {
    name: "daily",
    data() {
        return {
            // dayTime: "",
            today: moment(new Date()).format("YYYY-MM-DD"),
            list: [],
            // ----------------------
            total: 10,
            pages: 1
        };
    },
    computed: {
        ...mapState(["saveType", "modules", "saveType"])
    },
    watch: {
        saveType() {
            this.getList();
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getSummaries(param) {
            console.log(param);
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总价";
                    return;
                }
                console.log(sums,33)
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] += "";
                } else {
                    sums[index] = "N/A";
                }
            });
            sums[1]=""
            return sums;
        },

        // openPicker() {
        //     this.$refs.picker.open();
        // },
        fy(val) {
            this.pages = val;
            this.getList();
        },
        getList() {
            var params = {
                pageNum: this.pages,
                pageSize: 10,
                module: this.saveType
            };
            this.$api.post(this.$url.report4Day, params, res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.total = res.data.count;
                    this.list = res.data.data;
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.daily {
    padding: 0 5px;
    box-sizing: border-box;
}
</style>
